<template>
  <div class="RegionManage">
    <SearchAndList>
      <!-- 搜索部分开始 -->
      <template #search>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="区域搜索：" size="medium">
            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              icon="el-icon-search"
              @click="getRegionList"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 搜索部分结束 -->
      <!-- 按钮开始 -->
      <template #buttons>
        <el-button
          size="medium"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true"
          >新建</el-button
        >
      </template>
      <!-- 按钮结束 -->
      <!-- 列表开始 -->
      <template #list>
        <el-table
          v-loading="loading"
          :data="taskData.currentPageRecords"
          style="width: 100%"
        >
          <!-- 序号 -->
          <el-table-column
            type="index"
            :index="getIndex"
            label="序号"
            width="80"
          />
          <!-- 区域名称 -->
          <el-table-column prop="name" label="区域名称" />
          <!-- 点位数 -->
          <el-table-column prop="nodeCount" label="点位数" />
          <!-- 备注说明 -->
          <el-table-column prop="remark" label="备注说明" />
          <!-- 操作 -->
          <el-table-column label="操作" width="150">
            <template v-slot="{ row }">
              <el-button
                type="text"
                size="small"
                @click="detailFn(row.id, row.name)"
              >
                查看详情
              </el-button>
              <el-button type="text" size="small" @click="modifyFn(row)">
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                style="color: #ff5a5a"
                @click="delFn(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 列表结束 -->
      <!-- 底部分页开始 -->
      <template #bottom>
        <el-pagination
          @current-change="paginaTion"
          layout="slot, prev, next"
          :page-size="10"
          :total="getTotalCount"
          prev-text="上一页"
          next-text="下一页"
          background
        >
          <template>
            <div class="str">
              共{{ taskData.totalCount }}条记录&nbsp;&nbsp;第
              {{ taskData.pageIndex }}/{{ taskData.totalPage }} 页
            </div>
          </template>
        </el-pagination>
      </template>
      <!-- 底部分页结束 -->
    </SearchAndList>
    <!-- 新建和修改的弹框开始 -->
    <el-dialog
      :title="form.id ? '编辑区域' : '新增区域'"
      :visible.sync="dialogFormVisible"
      custom-class="dialog-form"
      width="630px"
      @closed="closeFn"
    >
      <el-form :model="form" ref="fff" :rules="rules" label-width="100px">
        <el-form-item label="区域名称：" prop="name">
          <el-input
            v-model="form.name"
            type="text"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="备注说明：" prop="remark">
          <el-input
            v-model="form.remark"
            autocomplete="off"
            type="textarea"
            maxlength="40"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新建和修改的弹框结束 -->
    <!-- 查看详情弹框开始 -->
    <el-dialog title="区域详情" :visible.sync="dialogTableVisible">
      <el-form>
        <el-form-item label="区域名称：">
          <el-form-item :label="title" />
        </el-form-item>
        <el-form-item label="包含点位：">
            <el-table :data="gridData" style="width:450px">
              <el-table-column
                type="index"
                label="序号"
                width="150"
              ></el-table-column>
              <el-table-column
                property="name"
                label="点位名称"
                width="200"
              ></el-table-column>
              <el-table-column
                property="vmCount"
                label="设备数量"
              ></el-table-column>
            </el-table>
          </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情弹框结束 -->
  </div>
</template>

<script>
import SearchAndList from '@/components/SearchAndList.vue'
import {
  getRegionList,
  addRegion,
  delRegion,
  modifyRegion,
  detailRegion
} from '@/api/nodeAPI'
export default {
  components: {
    SearchAndList
  },
  data () {
    return {
      // 加载状态
      loading: false,
      // 分页索引
      pageIndex: 1,
      // 工单搜索框数据
      searchForm: {
        name: ''
      },
      // 弹框表单数据
      form: {
        name: '',
        remark: ''
      },
      // 表单弹框可视状态
      dialogFormVisible: false,
      // 表格弹框可视状态
      dialogTableVisible: false,
      // 获取的区域数据
      taskData: {
        currentPageRecords: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      },
      // 区域详细信息
      gridData: [],
      // 区域详情标题
      title: '',
      // 校验规则
      rules: {
        name: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        remark: [
          { required: true, message: '请输入备注说明', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getRegionList()
  },
  methods: {
    // 渲染界面
    async getRegionList () {
      // 改为加载状态
      this.loading = true
      // 请求api获取数据
      const { data } = await getRegionList({
        pageIndex: this.pageIndex,
        pageSize: this.taskData.pageSize,
        name: this.searchForm.name
      })
      this.taskData = data
      this.pageIndex = this.taskData.pageIndex
      // 结束加载状态
      this.loading = false
    },
    // 翻页
    paginaTion (res) {
      if (!this.loading) {
        if (res > this.pageIndex) {
          this.pageIndex++
          this.getRegionList()
        } else {
          this.pageIndex--
          this.getRegionList()
        }
      }
    },
    // 分页时处理索引
    getIndex (index) {
      if (this.pageIndex === '1') {
        return index + 1
      } else {
        return index + 10 * (this.pageIndex - 1) + 1
      }
    },
    // 提交
    async submit () {
      // 先进行表单校验
      await this.$refs.fff.validate()
      // id存在调用修改接口
      if (this.form.id) {
        modifyRegion({
          regionName: this.form.name,
          remark: this.form.remark,
          id: this.form.id
        })
        this.$message.success('修改成功')
      } else {
        // id不存在调用新增接口
        await addRegion({
          regionName: this.form.name,
          remark: this.form.remark
        })
        this.$message.success('添加成功')
      }
      this.closeFn()
      this.getRegionList()
    },
    // 删除区域
    async delFn (id) {
      try {
        await this.$confirm('确认删除嘛？')
        await delRegion(id)
        this.$message.success('删除成功')
        this.getRegionList()
      } catch (e) {
        console.log(e)
      }
    },
    // 修改区域
    modifyFn (row) {
      this.dialogFormVisible = true
      this.form = row
    },
    // 查看详情
    async detailFn (id, name) {
      this.dialogTableVisible = true
      this.title = name
      const {
        data: { currentPageRecords }
      } = await detailRegion({
        pageIndex: this.pageIndex,
        pageSize: this.taskData.pageSize,
        regionId: id
      })
      this.gridData = currentPageRecords
    },
    // 关闭弹框
    closeFn () {
      // 手动重置表单
      this.form = {
        name: '',
        remark: ''
      }
      // 重置表单校验
      this.$refs.fff.resetFields()
      this.dialogFormVisible = false
    }
  },
  computed: {
    getTotalCount () {
      return +this.taskData.totalCount
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 30px 60px;
}
</style>
